<template>
  <div class="page-common-layout project-baseInfo-container">
    <div class="header">
      <div class="card-container" style="margin-bottom:4px">
        <div class="card-body affix">
          <div class="sub-title">{{ dataSoucre.proName }}</div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="card-container">
        <div class="card-header">项目概况</div>
        <div class="card-body overview">
          <div class="sub-title"></div>
          <div class="introduce-container">
            <div class="images">
              <ViewerImg
                :toolbar="false"
                :title="false"
                v-if="getUrl(dataSoucre.image)"
              >
                <img :src="getUrl(dataSoucre.image)" alt="暂无图片" />
              </ViewerImg>
              <div v-else class="not-data"></div>
            </div>
            <div class="text">
              {{ dataSoucre.introduction }}
              <div class="more" @click="handleMore()" v-if="!showMore">
                查看更多>>
              </div>
            </div>
            <!-- <a-empty v-else :image="simpleImage" /> -->
          </div>
          <div
            class="more-container animate__animated"
            :class="[showMore && 'show']"
          >
            <a-divider />
            <a-descriptions>
              <a-descriptions-item label=" 投资规模(万元)">
                {{ dataSoucre.roadMoney }}
              </a-descriptions-item>
              <a-descriptions-item label="项目状态">
                {{ dataSoucre.proStatusDesc }}
              </a-descriptions-item>
              <a-descriptions-item label="工程类型">
                {{ dataSoucre.engTypeDesc }}
              </a-descriptions-item>
              <a-descriptions-item label="开工日期">
                {{ dataSoucre.startDate }}
              </a-descriptions-item>
              <a-descriptions-item label="交工日期">
                {{ dataSoucre.endDate }}
              </a-descriptions-item>
              <a-descriptions-item label="归属公司">
                {{ dataSoucre.companyName }}
              </a-descriptions-item>
              <a-descriptions-item label="项目负责人">
                {{ dataSoucre.contacts }}
              </a-descriptions-item>
              <a-descriptions-item label="联系方式">
                {{ dataSoucre.contactsPhone }}
              </a-descriptions-item>
              <a-descriptions-item label="区位">
                {{ dataSoucre.workAreaDesc }}
              </a-descriptions-item>
              <a-descriptions-item label="项目所在地">
                {{ dataSoucre.address }}
              </a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <div class="table-more">
              <div class="table-title">标段</div>
              <div class="table-container">
                <div class="table-header">
                  <div class="td">标段类型</div>
                  <div class="td">标段名称</div>
                  <div class="td">承包单位</div>
                  <div class="td">联系人</div>
                  <div class="td">联系方式</div>
                </div>
                <div class="table-body">
                  <template v-if="tableData.length > 0">
                    <div
                      class="th"
                      v-for="(item, index) in tableData"
                      :key="index"
                    >
                      <div class="td">{{ item.orgTypeDesc }}</div>
                      <div class="td">{{ item.orgName }}</div>
                      <div class="td">{{ item.remark }}</div>
                      <div class="td">{{ item.orgPerson }}</div>
                      <div class="td">{{ item.orgTelephone }}</div>
                    </div>
                  </template>
                  <a-empty v-else :image="simpleImage" />
                </div>
              </div>
            </div>
            <div class="flow-title">
              项目流程
              <div class="flow-legend">
                <div class="legend-item">未开始</div>
                <div class="legend-item">已完成</div>
              </div>
            </div>
            <div class="project-flow" v-if="dataSoucre.flowChart">
              <components
                :is="dataSoucre.flowChart"
                :visible.sync="showMore"
                :tenantCode="dataSoucre.proCode"
              ></components>
            </div>
            <a-empty v-else :image="simpleImage" />
            <div class="retract" @click="showMore = false">
              收起<a-icon type="up" />
            </div>
          </div>
        </div>
      </div>

      <div class="card-container">
        <div class="card-header">新闻中心</div>
        <div class="card-body news">
          <template v-if="newsData.length > 0">
            <div
              class="news-item"
              v-for="(item, index) in newsData"
              :key="index"
              @click.stop="handlePanel(item, index)"
              :class="[item.show && 'panel']"
            >
              <div class="news-main">
                <div class="news-image">
                  <ViewerImg :toolbar="false" :title="false">
                    <img :src="getUrl(item.image)" alt="暂无图片" />
                  </ViewerImg>
                </div>
                <div class="news-content">
                  <div class="sub-title">
                    {{ item.title }}
                  </div>
                  <div class="body">
                    {{ item.introduction }}
                  </div>
                  <div class="date">
                    <div>发布日期：{{ item.releaseDate }}</div>
                    <div class="date-item">发布人：{{ item.publisher }}</div>
                  </div>
                </div>
              </div>
              <div class="new-line" v-if="item.show"></div>
              <div class="news-panel" :class="[item.show ? 'show' : 'hide']">
                <div v-html="item.content"></div>
                <span class="closure" @click.stop="handleClose(item, index)">
                  收起<a-icon type="up" />
                </span>
              </div>
            </div>
          </template>
          <a-empty v-else :image="simpleImage" />
          <div class="pager-container">
            <vxe-pager
              size="small"
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
              :page-sizes="[20, 50, 100, 500]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  共<span>{{ pager.total }}</span
                  >项数据
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";
import { axios } from "@/utils/request";
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import flowPicture from "@/pages/customPage/knowledgeBase/flowPath/components/flowPicture.vue";
import ganyuFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuFlow.vue";
import ganyuGlFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuGlFlow.vue";
import ganyuSgFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuSgFlow.vue";
import lygFlow from "@/pages/customPage/knowledgeBase/flowPath/components/lygFlow.vue";
import xuweiFlow from "@/pages/customPage/knowledgeBase/flowPath/components/xuweiFlow.vue";
export default {
  components: {
    ViewerImg,
    flowPicture,
    ganyuFlow,
    ganyuGlFlow,
    lygFlow,
    xuweiFlow,
    ganyuSgFlow,
  },
  data() {
    return {
      dataSoucre: {},
      tableData: [],
      newsData: [],
      showMore: false,
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      currentProject: {},
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.currentProject = JSON.parse(
        localStorage.getItem("CURRENT_PROJECT_DATA")
      );
      Promise.all([this.getOverviewData(), this.getNewsData()]);
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getNewsData();
    },
    //更多
    handleMore() {
      this.newsData.forEach((v) => {
        v.show = false;
      });
      this.showMore = true;
    },

    getOverviewData() {
      let { proCode, orgCode } = this.currentProject;
      let code = orgCode || proCode;
      return new Promise((resolve, reject) => {
        axios
          .post(`/mdata/sysProject/queryProByProCode?proCode=${code}`, {
            headers: {
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            this.dataSoucre = res ?? {};
            this.tableData = this.dataSoucre?.unitList ?? [];
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = {};
            this.tableData = [];
            reject();
          });
      });
    },

    getNewsData() {
      let { proCode, orgCode } = this.currentProject;
      let code = orgCode || proCode;
      let { page, pageSize } = this.pager;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/portcommon/sysProjectDynamic/getPageSet?pageNo=${page}&pageSize=${pageSize}&order=desc&sort=releaseDate`,
            {
              proCode: code,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.newsData = res?.rows ?? [];
            this.newsData.forEach((item) => {
              this.$set(item, "show", false);
            });
            this.pager.total = res?.totalCount ?? 0;
            resolve();
          })
          .catch((_) => {
            this.pager.total = 0;
            this.newsData = [];
            reject();
          });
      });
    },

    handlePanel(item, index) {
      this.showMore = false;
      this.newsData.forEach((v) => {
        v.show = false;
      });
      this.newsData[index].show = true;
    },

    handleClose(item, index) {
      this.newsData[index].show = false;
    },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },
  },
};
</script>

<style lang="less" scoped>
.project-baseInfo-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .page-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .card-container {
    border-radius: 6px 6px 0px 0px;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    flex: 1;
    .card-header {
      height: 56px;
      padding: 0 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: @title-color;
      background: @base-bg-color;
      margin-bottom: 1px;
    }
    .card-body {
      flex: 1;
      background: @base-bg-color;
      border-radius: 0px 0px 6px 6px;
      padding: 20px 100px;
      box-sizing: border-box;
      /deep/.anticon-up {
        margin-left: 4px;
        font-size: 14px;
      }
      &.affix {
        border-radius: 6px;
        padding: 10px 100px;
        .sub-title {
          text-align: center;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 26px;
          color: @title-color;
        }
      }

      &.overview {
        display: flex;
        flex-direction: column;
        .introduce-container {
          .images {
            float: left;
            padding: 4px;
            width: 332px;
            height: 186px;
            margin-right: 24px;
            div {
              width: 332px;
              height: 186px;
            }
            img {
              border-radius: 6px 6px 6px 6px;
              width: 332px;
              height: 186px;
            }
            .not-data {
              height: 100%;
              width: 100%;
              background: url("./images/bg.png") no-repeat center;
              background-size: 60% 70%;
            }
          }
          .text {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: @text-color;
            line-height: 30px;
            .more {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #1677ff;
              cursor: pointer;
              display: flex;
              justify-content: flex-end;
            }
          }
        }
        .more-container {
          transition: 0.3s;
          flex: 1;
          display: flex;
          flex-direction: column;
          display: none;
          .ant-descriptions {
            .ant-descriptions-view {
              font-family: Microsoft YaHei;
              font-weight: 400;
              .ant-descriptions-item-label {
                font-size: 16px;
                color: @title-color;
              }
              .ant-descriptions-item-content {
                font-size: 16px;
                color: @text-color;
              }
            }
          }
          .table-more {
            display: flex;
            flex-direction: column;
            .table-title {
              flex-shrink: 0;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 18px;
              color: @title-color;
              margin-bottom: 16px;
            }
            .table-container {
              flex: 1;
              display: flex;
              flex-direction: column;
              .td {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: @text-color;
              }
              .table-header {
                display: flex;
                height: 40px;
                background: #fafafa;
                border-bottom: 1px solid rgba(240, 240, 240, 0.3);
              }
              .table-body {
                flex: 1;
                position: relative;
                .th {
                  display: flex;
                  align-items: center;
                  min-height: 40px;
                  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
                }
              }
            }
          }
          .flow-title {
            flex-shrink: 0;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: @title-color;
            margin: 16px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .flow-legend {
              display: flex;
              font-size: 14px;
              .legend-item {
                &::before {
                  content: "";
                  height: 10px;
                  width: 10px;
                  background: #239b53;
                  display: inline-block;
                  margin-right: 8px;
                }
                &:first-of-type {
                  margin-right: 40px;
                  &::before {
                    background: #8c8c8c;
                  }
                }
              }
            }
          }
          .project-flow {
            margin-bottom: 10px;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            min-height: 1000px;
            background-image: linear-gradient(
                to right,
                rgb(234 234 234) 1px,
                transparent 1px
              ),
              linear-gradient(to bottom, rgb(234 234 234) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: center center;
            overflow-x: auto;
          }

          .retract {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #1677ff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            cursor: pointer;
          }
          &.show {
            transition: 0.3s;
            display: block;
          }
        }
      }
      &.news {
        padding: 20px 80px;
        /deep/.ant-empty {
          margin: 90px 0 !important;
        }
        .news-item {
          padding: 20px 20px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .news-main {
            display: flex;
            align-items: center;
            .news-image {
              width: 250px;
              height: 140px;
              margin-right: 24px;
              div {
                width: 250px;
                height: 140px;
              }
              img {
                width: 250px;
                height: 140px;
                border-radius: 4px 4px 4px 4px;
              }
            }
            .news-content {
              .sub-title {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: @title-color;
                margin-bottom: 10px;
              }
              .body {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: @text-color;
              }
              .date {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                display: flex;
                align-items: center;
                margin-top: 10px;
                .date-item {
                  padding-left: 60px;
                }
              }
            }
          }
          .new-line {
            margin-top: 20px;
            border-top: 1px solid @border-color;
          }
          .news-panel {
            padding: 20px;
            box-sizing: border-box;
            &.show {
              display: block;
              transition: all 50s;
            }
            &.hide {
              display: none;
            }

            .closure {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #1677ff;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            }
          }
          &.panel {
            background: unset;
            border-radius: 8px;
            border: 1px solid @border-color;
          }

          &:hover {
            background: rgba(22, 119, 255, 0.2);
            cursor: pointer;
            .news-content {
              .sub-title {
                color: #1677ff;
              }
              .body {
                color: #1677ff;
              }
              .date {
                color: #1677ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
